import React, { useEffect } from "react";
import './index.less';
import { Outlet, useNavigate } from 'react-router-dom';
import { Layout, Button, Space, Table, Popconfirm } from 'antd';
import { connect } from "react-redux";
import { getDevItemListAction, delDevItemAction, publishDevItemAction } from '@redux/actions';
import moment from "moment";

const { Header } = Layout;

const UnderDevelopment = (props) => {

  const navigate = useNavigate();
  const { getDevItemListAction, delDevItemAction, publishDevItemAction, list } = props;

  const columns = [
    {
      title: '立项时间',
      dataIndex: 'startDate',
      key: 'startDate',
      render: (text) => <span>{moment(text).format('YYYY-MM-DD HH:mm:ss')}</span>,
    },
    {
      title: '研发内容',
      dataIndex: 'content',
      key: 'content',
    },
    {
      title: '贡献用户',
      dataIndex: 'contriId',
      key: 'contriId',
      render: (arr) => <span>{arr ? arr.join(', ') : ''}</span>
    },
    {
      title: '研发进度',
      dataIndex: 'devProg',
      key: 'devProg'
    },
    {
      title: '操作',
      key: 'action',
      render: (_, record) => (
        <Space size="middle">
          <Popconfirm
            placement="topRight"
            title='你确定要删除该条研发项目吗？'
            onConfirm={() => {confirmDelete(record.key)}}
            okText="确定"
            cancelText="取消"
          >
            <Button>删除</Button>
          </Popconfirm>
          <Button onClick={() => { navigate(`/message-board/under-development/edit?content=${encodeURIComponent(record.content)}&contriId=${JSON.stringify(record.contriId)}&id=${record.key}&devProg=${record.devProg}`) }}>
            修改
          </Button>
          <Popconfirm
            placement="topLeft"
            title='你确定要发布该条研发项目吗？'
            onConfirm={() => {confirmPublish(record.key)}}
            okText="确定"
            cancelText="取消"
          >
            <Button>发布</Button>
          </Popconfirm>
        </Space>
      ),
    },
  ];

  const confirmDelete = (id) => {
    delDevItemAction(id);
  };

  const confirmPublish = (id) => {
    publishDevItemAction(id, navigate);
  }

  useEffect(() => {
    getDevItemListAction();
  }, [getDevItemListAction])

  return <div className="previous_fonc">
    <Layout>
      <Header>
        <Button onClick={() => {navigate('/message-board/under-development/edit')}}>新增研发项目</Button>
      </Header>
    </Layout>
    <Table columns={columns} dataSource={list}
      pagination={{ defaultPageSize: 20, total: list.length }}
    />
    <Outlet />
  </div>
}

export default connect(
  state => ({
    list: state.devItemReducer
  }),
  { getDevItemListAction, delDevItemAction, publishDevItemAction }
)(UnderDevelopment);